<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>时钟</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-decoration: none; 
		}
		body{
			background: -webkit-radial-gradient(center center,circle,#666,#000); 
		} 
		/*最外层盒子*/
		.box{
			width:410px;
			height:410px;
			margin: 0 auto;
			padding-top: 50px;
		}
		/*时钟外盘*/
		.clock{
			position: relative;
			width: 400px;
			height: 400px;
			border: 5px solid #fff;
			background:-webkit-radial-gradient(center center,circle,#fff,#bbb);
			border-radius: 50%;
		}
		/*时钟圆心*/
		.clock .clock-xin{
			position: absolute;
			top:50%;
			left:50%;
			width:30px;
			height:30px;
			margin:-15px 0 0 -15px;
			background: #eee;
			border-radius: 50%;
		}
		/*圆心红点*/
		.clock .clock-xin2{
			position: absolute;
			top:50%;
			left:50%;
			width:12px;
			height: 12px;
			margin:-6px 0 0 -6px;
			background-color: #f00;
			z-index: 100;
			border-radius: 50%;
		}
		/*时间设置*/
		.clock .date{
			position:absolute;
			top: 245px;
			left: 130px;
			font-size: 20px;
			color:#000;
			z-index: 3;
			text-shadow: 1px 1px white;
		}
		/*小时*/
		.clock .hour{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -3px 0 0 -10px;
			width: 160px;
			height: 6px;
			background-color: #000;
			z-index: 3;
			transform-origin: 10px 50%;/*圆心基点旋转位置设置*/
			border-radius: 5px;
		}
		/*分钟*/
		.clock .min{
			position: absolute;
			top: 50%;
			left: 50%;
			width:180px;
			height: 4px;
			margin: -2px 0 0 -10px;
			background-color: #333;
			z-index: 4;
			transform-origin: 10px 50%;
			border-radius: 5px;
		}
		/*秒*/
		.clock .sec{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 210px;
			height: 2px;
			margin: -1px 0 0 -30px;
			background-color: #f00;
			z-index: 5;
			transform-origin: 30px 50%; 
		}
		.clock em{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			margin-left: -1px;
			width: 2px;
			height: 5px;
			background-color: #000;
			transform-origin: 50% 0;
		}
		.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;} 
		.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; } 
	</style>
</head>
<body>
	<!--最外层大盒子-->
	<div class="box">
		<!--时钟外盘-->
		<div class="clock" id="clock">
			<!--时钟圆心-->
			<div class="clock-xin"></div>
			<!--圆心红点-->
			<div class="clock-xin2"></div>
			<!--时间设置-->
			<div id="date" class="date"></div> 
			<!--小时-->
			<div id="hour" class="hour"></div> 
			<!--分钟-->
			<div id="min" class="min"></div> 
			<!--秒-->
			<div id="sec" class="sec"></div>
		</div>
	</div>
	<script type="text/javascript">
		//页面加载完执行
		window.onload = function(){
			var $clock = document.getElementById('clock'),//获取最外层表盘
			$date = document.getElementById('date'),//获取天数
			$hour = document.getElementById('hour'),//获取时间
			$min = document.getElementById('min'),//获取分钟
			$sec = document.getElementById('sec'),//获取秒
			oSec = document.createElement('em');//创建em节点

		//循环创建60个em节点
			for (var i = 0; i < 61; i++) {
				var tempSecs = oSec.cloneNode();//em节点copy一份 cloneNode() copy备份
				pos = getSecPos(i); 
				//设置每个表盘值
				if(i%5 == 0){
					tempSecs.className = 'ishour';
					tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>';
				}
				tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);'; 
				$clock.appendChild(tempSecs); 
			}
			

			// 圆弧上的坐标换算 
			function getSecPos(deg){
				var hudu = (2*Math.PI/360)*6*deg,//获取幅度
				r = 200;//半径
				return {
					x: Math.floor(r + Math.sin(hudu)*r),
					y: Math.floor(r - Math.cos(hudu)*r),
				}
			};

			(function(){
				//点前时间
				var _now = new Date(),//实例化时间
				_h = _now.getHours(),//获取小时
				_m = _now.getMinutes(),//获取分钟
				_s = _now.getSeconds(),//获取秒
				_day = _now.getDay();//获取星期的某一天的数字
				_day = (_day==0)?7:_day;//用三目判断0-7
				if(_day==1){
					_day = "一";
				}else if(_day==2){
					_day = "二";
				}else if(_day==3){
					_day = "三";
				}else if(_day==4){
					_day = "四";
				}else if(_day==5){
					_day = "五";
				}else if(_day==6){
					_day = "六";
				}else if(_day==7){
					_day = "日";
				}
				//设置时间的显示
				$date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day;
				//绘制时钟
				var gotime = function(){
					var _h_dep = 0; 
					_s++; 
					if(_s>59){ 
					_s=0; 
					_m++; 
					} 
					if(_m>59){ 
					_m=0; 
					_h++; 
					} 
					if(_h>12){ 
					_h = _h-12; 
					}
					_h_dep = Math.floor(_m/12)*6; 
					$hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);'; 
					$min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);'; 
					//秒针移动
					$sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);'; 
				}
				gotime(); 
				setInterval(gotime, 1000); 
			})();
			
		}
		

	</script>
</body>
</html>